<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.searchKey"
          placeholder="TOPIC"
          size="small"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">查询 </el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>

      <el-col :span="24" class="mt10">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10 ds-table"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="topic" label="TOPIC" />
      <el-table-column prop="mqttKey" label="MQTT KEY" />
      <el-table-column prop="scriptCode" label="处理方式">
        <template slot-scope="scope">
          <div class="table-scriptItem">
            <span> 脚本 </span>
            <span @click="handleScript(scope.row)"> 调试 </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="notes" label="描述" />
      <el-table-column prop="modifyBy" label="更新人" />
      <el-table-column prop="modifyDate" label="更新时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" label="操作" width="250">
        <template slot-scope="scope">
          <span class="table-actionItem"
            ><el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            ></span
          >
          <span class="table-actionItem">
            <el-popconfirm
              title="确认要删除该监听吗？删除后无法恢复"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData()"
      />
    </div>
    <MqttSubscriptionForm ref="MqttSubscriptionForm" />
  </div>
</template>
<script>
import {
  getHmmqttsubscriptionPagelist,
  deleteHmmqttsubscription,
} from "@/apis/paas/HmMqttSubscriptionController.js"
import { getHmenvironmentList } from "@/apis/paas/HmEnvironmentController.js"
import MqttSubscriptionForm from "./MqttSubscriptionForm.vue"
import DropdownButtons from "@/components/DropdownButtons/Index.vue"
export default {
  name: "MqttSubscription",
  components: {
    DropdownButtons,
    MqttSubscriptionForm,
  },
  data() {
    return {
      loading: false,
      queryData: {},
      tableData: [],
      total: 0,
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      envConfigList: [], // 系统显示的环境
    }
  },
  created() {
    this.loadAllData()
  },
  methods: {
    async loadAllData() {
      this.envConfigList = await getHmenvironmentList({ hidden: 0 })
      this.loadData()
    },
    // 加载当前文件夹下的数据
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true
      const params = {
        ...this.queryData,
        ...this.pageData,
        pageNo,
      }
      getHmmqttsubscriptionPagelist(params)
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1)
            return
          }
          this.tableData = res.data
          this.total = res.totalCount
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleReset() {
      this.queryData = {}
      this.loadData(1)
    },
    handleCreate() {
      this.$refs.MqttSubscriptionForm.open(undefined, () => {
        this.loadData()
        this.$message.success("操作成功")
      })
    },
    handleScript(record) {
      const { origin, pathname } = window.location
      window.open(
        `${origin}${pathname}#/scriptDebug?scriptCode=${record.scriptCode}`
      )
    },
    handleEdit(record) {
      this.$refs.MqttSubscriptionForm.open(record, () => {
        this.loadData()
        this.$message.success("操作成功")
      })
    },

    handleDelete(record) {
      deleteHmmqttsubscription([record.id]).then((res) => {
        this.loadData()
        this.$message.success("操作成功")
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.table-scriptItem {
  span:last-child {
    color: #409eff;
    float: right;
    cursor: pointer;
  }
}
</style>
